<template>
  <div class="flex items-center no-wrap full-width">
    <q-img :width="size" :ratio="1" :src="item.images[0].thumb" @click="$emit('detail', item)" />
    <div class="q-px-sm content-box">
      <div class="text-bold ellipsis" style="font-size: 16px;" @click="$emit('detail', item)">{{ item.material_name }}</div>
      <div class="text-grey-8 ellipsis" style="height: 21px;" @click="$emit('detail', item)">{{ item.material_model }}</div>
      <div class="text-grey-8 ellipsis" style="height: 21px;" v-if="!dense">{{ item.brand }} {{ item.origin }}</div>
      <div class="flex justify-between no-wrap">
        <div class="text-red text-bold ellipsis" style="font-size: 14px; line-height: normal;">¥<a style="font-size:24px;">{{ splitMoney(item.sale_price)[0] }}</a>{{ splitMoney(item.sale_price)[1] }} <a class="text-grey-6">/ {{ item.material_unit }}</a></div>
        <div class="flex no-wrap">
          <q-btn icon="remove_circle_outline" flat round dense color="yellow-8" v-if="item.cart_amount > 0" @click="remove" />
          <div style="font-size: 16px;" class="flex items-center q-px-xs" v-if="item.cart_amount > 0"><b>{{ item.cart_amount }}</b></div>
          <q-btn icon="add_circle" flat round dense color="yellow-8" @click="add" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'goodsItem',
  props: {
    item: Object,
    dense: { type: Boolean, default: false }
  },
  emmits: ['remove', 'add'],
  methods: {
    splitMoney (money) {
      const arr = String(Number(Number(money).toFixed(2))).split('.');
      if (arr.length === 1) {
        return [arr[0], ''];
      } else {
        return [arr[0], '.' + arr[1]];
      }
    },
    add () {
      this.$emit('add');
    },
    remove () {
      this.$emit('remove');
    }
  },
  computed: {
    size () {
      return this.dense ? '68px' : '96px';
    }
  }
});
</script>

<style lang="scss" scoped>
.content-box {
  flex: 1;
}
</style>
